<template>
  <div id="container">
    <div class="title">报修单详情</div>
    <!--表单信息-->
    <div class="box">
      <div class="info">
        <div class="h3info">
          <h3>基本信息</h3>
        </div>
        <div
          class="tips"
        >最新动态：{{dynamic[dynamic.length-1].time|dateFormat}} {{dynamic[dynamic.length-1].man}}{{dynamic[dynamic.length-1].content}}</div>
        <div class="content">
          <ul class="list">
            <li
              v-if="datainfo.time!==undefined&&datainfo.time!=='NULL'&&datainfo.time!==null&&datainfo.time!==''"
            >报修时间：{{datainfo.time | dateFormat}}</li>
            <li
              v-if="datainfo.place!==undefined&&datainfo.place!=='NULL'&&datainfo.place!==null&&datainfo.place!==''"
            >维修地点：{{datainfo.place}}</li>
            <li
              v-if="datainfo.stuId!==undefined&&datainfo.stuId!=='NULL'&&datainfo.stuId!==null&&datainfo.stuId!==''"
            >学号：{{datainfo.stuId}}</li>
            <li
              v-if="datainfo.name!==undefined&&datainfo.name!=='NULL'&&datainfo.name!==null&&datainfo.name!==''"
            >姓名：{{datainfo.name}}</li>
            <li
              v-if="datainfo.network!==undefined&&datainfo.network!=='NULL'&&datainfo.network!==null&& datainfo.network!==''"
            >网络环境：{{datainfo.network}}</li>
            <li
              v-if="datainfo.port!==undefined&&datainfo.port!=='NULL'&&datainfo.port!==null&&datainfo.port!==''"
            >端口状态：{{datainfo.port}}</li>
            <li
              v-if="datainfo.young!==undefined&&datainfo.young!=='NULL'&&datainfo.young!==null&&datainfo.young!==''"
            >WiFi状态：{{datainfo.young}}</li>
            <li
              v-if="datainfo.test!==undefined&&datainfo.test!=='NULL'&&datainfo.test!==null&&datainfo.test!==''"
            >测试结果：{{datainfo.test}}</li>
            <li
              v-if="datainfo.errcode!==undefined&&datainfo.errcode!=='NULL'&&datainfo.errcode!==null&&datainfo.errcode!==''"
            >错误码：{{datainfo.errcode}}</li>
            <li
              v-if="datainfo.portnum!==undefined&&datainfo.portnum!=='NULL'&&datainfo.portnum!==null&&datainfo.portnum!==''"
            >端口号：{{datainfo.portnum}}</li>
          </ul>
        </div>
        <h3>维修动态</h3>
        <div class="tips" style="line-height: 50px;color: #383838;">
          <p
            v-for="item in dynamic"
            :key="item.time"
          >&nbsp;{{item.time|dateFormat}}&nbsp;&nbsp;{{item.man}} {{item.content}}</p>
        </div>
      </div>
      <div class="button">
        <el-button @click="open">撤销</el-button>
        <el-button type="primary" @click="goback">返回</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { stringify } from "querystring";
export default {
  data() {
    return {
      datainfo: {}, // 表单信息
      dynamic: [{ man: "", time: 0, content: "" }] // 动态信息
    };
  },
  mounted() {
    this.getListinfo();
  },
  methods: {
    open() {
      this.$prompt(" 请输入报修单手机号：", "验证信息", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputPattern: /^1([38]\d|5[0-35-9]|7[3678])\d{8}$/,
        inputErrorMessage: "手机号格式错误",
        center: true
      })
        .then(({ value }) => {
          this.$axios
            .get("/api/order/closeOrder/" + this.$route.params.id + "/" + value)
            // {
            //   id: this.$route.params.id,
            //   phone: value,
            //   operation: "del"
            // }
            .then(res => {
              //接收验证
              if (res.data.status == 1) {
                this.$alert(res.data.message, {
                  confirmButtonText: "确定",
                  center: true,
                  callback: action => {
                    this.$router.go(-1);
                  }
                });
              } else {
                this.$alert("操作失败:"+res.data.message, {
                  confirmButtonText: "确定",
                  center: true
                });
              }
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消撤销"
          });
        });
    },
    //返回按钮
    goback() {
      this.$router.go(-1);
    },
    //表单数据详情
    getListinfo() {
      this.$axios
        .get("/api/order/queryById/" + this.$route.params.id)
        .then(res => {
          this.datainfo = res.data.order;
          if (res.data.orderUpdates.length !== 0) {
            this.dynamic = res.data.orderUpdates;
          }
        })
        .catch(err => {
          this.$message.error("获取列表失败");
        });
    }
  }
};
</script>

<style lang="scss" scoped>
#container {
  max-width: 1200px;
  margin: 0 auto;
  .title {
    margin: 10px 0;
    padding-left: 20px;
    line-height: 40px;
    background: #0075a9;
    color: #ffffff;
  }
  .box {
    width: 98%;
    margin: 0 auto;
    padding: 20px 0;
    border: 1px solid #0075a9;
    line-height: 50px;
    margin-bottom: 10px;
    .tips {
      margin: 0px 20px;
      padding-left: 5px;
      color: #00c582;
      line-height: 30px;
      font-size: 0.85em;
      border: 1px solid #e6e6e6;
      background: #f6f4f0;
    }
    .h3info {
      display: flex;
      justify-content: space-between;
    }
    h3 {
      padding-left: 20px;
      clear: both;
    }
    .list {
      padding-left: 20px;
      list-style: none;
      white-space: nowrap;
      // column-count: 2;
      // -moz-column-count: 2;
      // -webkit-column-count: 2;
      li {
        width: 49%;
        float: left;
      }
    }
    @media screen and (max-width: 768px) {
      .list {
        padding-left: 20px;
        list-style: none;
        white-space: nowrap;
        // column-count: 1;
        // -moz-column-count: 1;
        // -webkit-column-count: 1;
        li {
          width: 100%;
        }
      }
    }
  }
  .button {
    width: 150px;
    margin: 0 auto;
    justify-content: space-between;
  }
}
</style>